<template>
  <div>
    <h1>双向绑定</h1>
    <!--v-mode绑定input：被绑定的值在输入的时候会直接修改绑定的值-->
    <div>
      <input type="text" v-model="text" />
      <p>{{ text }}</p>
    </div>
    <!--v-mode绑定textarea：被绑定的值在输入的时候会直接修改绑定的值-->
    <div>
      <textarea rows="10" cols="25" v-model="content" />
      <p>{{ content }}</p>
    </div>
    <!--v-model绑定select-->
    <div>
      <select v-model="cityCode">
        <option value>请选择</option>
        <option v-for="city in citys" :value="city.code" :key="city.code">{{
          city.name
        }}</option>
      </select>
      <div>{{ cityCode }}:{{ cityName }}</div>
    </div>
    <!--v-model绑定radio-->
    <div>
      <input type="radio" name="sex" value="male" v-model="sex" /> 男
      <input type="radio" name="sex" value="female" v-model="sex" /> 女
      <p>{{ sex }}</p>
    </div>
    <!--checkbox-->
    <div>
      <input type="checkbox" v-model="remenber" />记住密码
      <p>{{ remenber }}</p>
    </div>
    <div>
      <input
        type="checkbox"
        true-value="Y"
        false-value="N"
        v-model="remenber2"
      />记住密码
      <p>{{ remenber2 }}</p>
    </div>
    <div>
      <input
        type="checkbox"
        name="hobby"
        value="basketball"
        v-model="hobby"
      />篮球
      <input
        type="checkbox"
        name="hobby"
        value="football"
        v-model="hobby"
      />足球
      <input
        type="checkbox"
        name="hobby"
        value="veryball"
        v-model="hobby"
      />羽毛球
      <p>{{ hobby.join(";") }}</p>
    </div>
    <!--v-model修饰符-->
    <!--lazy修饰符：失去焦点的时候才更新-->
    <div>
      <input type="text" v-model.lazy="text" />
      <p>{{ text }}</p>
    </div>
    <!--number修饰符：转成数字,无法转换的时候原样显示-->
    <div>
      <input type="text" v-model.number="num" />
      <p>{{ num }}</p>
    </div>
    <!--trim修饰符：去除两端的空格-->
    <div>
      <input type="text" v-model.trim="str" />
      <p>{{ str }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "demon8",
  data() {
    return {
      text: "测试",
      content: "",
      citys: [
        {
          name: "北京",
          code: "bj"
        },
        {
          name: "上海",
          code: "sh"
        },
        {
          name: "广州",
          code: "gz"
        }
      ],
      cityCode: "",
      sex: "",
      remenber: true,
      remenber2: "",
      hobby: [],
      num: 1,
      str: ""
    };
  },
  computed: {
    cityName() {
      let city = this.citys.find(city => city.code === this.cityCode);
      return city ? city.name : "";
    }
  }
};
</script>
<style lang="stylus" scoped></style>
